<template>
    <div class="app-container" ref="appContainer">
        <!-- <div class="header"> -->
        <div>
            <!-- ------------表格--------------->

            <div class="header">
                <!-- <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
                    <el-form-item>
                        <el-date-picker v-model="inputSearch.searchDate" type="date" placeholder="选择日期"
                            @change="getDayData">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <div class="search">
                    <el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
                </div> -->
            </div>


            <div class="table">
                <el-table v-loading="loading" :data="dailyList" show-summary highlight-current-row style="width: 100%"
                    :border="true">
                    <el-table-column label="日期" align="center" prop="date" width="170px">
                    </el-table-column>
                    <el-table-column label="当前玩家持有钻石总数" align="center" prop="gems" width="125px">
                    </el-table-column>
                    <el-table-column label="当前玩家持有金豆总数" align="center" prop="coins" width="125px">
                    </el-table-column>

                    <el-table-column label="当前玩家持有魅力总数" align="center" prop="meilis">
                    </el-table-column>

                    <el-table-column label="推广员未兑换收益总数" align="center" prop="income">
                    </el-table-column>

                </el-table>

            </div>

        </div>

        <!-- ------------分页--------------->
        <div class="pagination">
            <el-pagination v-model:currentPage="pageObj.pagenum" :page-size="pageObj.pagesize" background
                layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
                @current-change="getList" />
        </div>


    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Search } from '@element-plus/icons-vue'
import { Logger } from '@/engine/util/Logger'
import { DateUtil } from '@/engine/util/DateUtil'
import { HttpClient } from '@/utils/HttpClient'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { da, pa } from 'element-plus/es/locale'
const loading = ref(true)
const activeName = ref("first")
const appContainer = ref(null)


const inputSearch = reactive({
    searchDate: new Date()
})


let dailyList = reactive([
    {

    }
])
//列表查询选项
const pageObj = reactive({
    pagenum: 1, //第几页
    pagesize: 10, //一页多少个
    total: 0,
})

const handleSizeChange = (val: number) => {
    pageObj.pagesize = val
    getList()
}


onMounted(() => {
    nextTick(() => {
        // let data = appContainer.value.
    })
    setTimeout(() => {
        loading.value = false
    }, 500)
    getList()
})


const getDayData = () => {
    //   Logger.log("getDayData===", inputSearch)
    getList()
}


const getList = () => {
    Logger.log('onclickSearch!', inputSearch)
    // if(inputSearch.searchId ==)
    HttpClient.get_daily_resource((data) => {
        formatDailyList(data, dailyList)
    })
}


const formatDailyList = (users: Array<object>, resultList: Array<object>) => {
    resultList.splice(0)

    for (let i = 0; i < users.length; i++) {
        let user = {
            "gems": users[i]["gems"],
            "coins": users[i]["coins"],
            "income": users[i]["income"],
            "meilis": users[i]["meilis"],
            "date": DateUtil.formatDateStr3(new Date(users[i]["date"]).getTime()),
            "time":new Date(users[i]["date"]).getTime(),
        }
        resultList[i] = user
    }
    resultList.sort((a:object, b:object)=>{
        return b["time"]-a["time"]
    })
}




</script>
      
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
      